<template>
  <div>
    <el-card shadow="always" style="height: 100%">
      <!--      <h1 v-show="!loading_question">{{ questions.question.id }} . {{ questions.question.questionName }}</h1>-->
      <h1>{{ this.programData.id }} . {{ this.programData.name }}</h1>

      <!--      <el-skeleton :rows="0" animated v-show="loading_question"/>-->
      <el-tabs v-model="activeName" class="demo-tabs" style="width: 100%;">
        <!-- 题目详细信息 -->
        <el-tab-pane label="题目" name="first" style="width: 100%;">
          <el-divider content-position="left"><strong>题目信息</strong></el-divider>
          <div class="desc-box">
            <p class="desc-p">{{ this.programData.description }}</p>
          </div>
          <el-divider content-position="left"><strong>输入样式</strong></el-divider>
          <div class="desc-box">
            <p class="desc-p">{{ this.programData.inputStyle }}</p>
          </div>
          <el-divider content-position="left"><strong>输出格式</strong></el-divider>
          <div class="desc-box">
            <p class="desc-p">{{ this.programData.outputStyle }}</p>
          </div>
          <el-divider content-position="left"><strong>数据范围</strong></el-divider>
          <div class="desc-box">
            <p class="desc-p">{{ this.programData.dataRange }}</p>
          </div>
          <el-divider content-position="left"><strong>样例输入</strong></el-divider>
          <p v-for="item in JSON.parse(this.programData.inputSample)">{{ item }}</p>
          <el-divider content-position="left"><strong>样例输出</strong></el-divider>
          <p v-for="item in JSON.parse(this.programData.outputSample)">{{ item }}</p>


          <div>
            <el-row>
              <el-col :span="12">
                <Acescript :editor-config="conf"></Acescript>
              </el-col>
              <el-col :span="12">
                <el-row style="min-height: 40px"></el-row>
                <el-card style="height: 300px" shadow="always">
                  <div v-if="lastResult.title===''">
                    <p>当前未提交代码</p>
                  </div>
                  <div v-else>
                    <h3>提交结果</h3>
                    <p>{{lastResult.title}}</p>
                    <h4>信息</h4>
                    <p>{{lastResult.message}}</p>
                  </div>


                </el-card>
              </el-col>
            </el-row>
          </div>
          <el-row class="empty-row"></el-row>
          <el-button type="success" @click="submit">提交</el-button>
        </el-tab-pane>


      </el-tabs>

    </el-card>
  </div>
</template>

<script>

import {getQueProgramById} from "@/api/question";
import Acescript  from '@/components/font/AceEditor.vue'
import {judgeProgram} from "@/api/judge";
export default {
  name: "App",
  components: {
    Acescript
  },
  data() {
    return {
      lastResult:{
          title:'',
      },
      conf:{
        lang:'java',
        // content:'',
      },
      test:'',
      theme: 'tomorrow_night_blue',
      programData: null,
      activeName: 'first'
    };
  }, methods: {
    submit(){
      let req={
        code:this.conf.content,
        language:this.conf.lang,
        questionId:this.programData.id
      }
      judgeProgram(req).then(res=>{
        if(res.code===200){
          this.lastResult=res.data
        }
        if(res.data.title==='Accept'){
          this.$notify({
            title: 'Accept',
            message: '题目通过',
            type: 'success'
          });
        }

      })
    },
    fetchQuestion() {
      getQueProgramById(parseInt(localStorage.getItem('selectQuestionProgramId'))).then(res => {
        this.programData = res.data
        this.test=JSON.parse(this.programData.inputSample)
        console.log(this.programData.inputSample)
        // this.programData.inputSample=JSON.parse(this.programData.inputSample)
        // this.programData.outputSample=JSON.parse(this.programData.outputSample)

      })
    }
  }, mounted() {
    this.fetchQuestion()
  }
};
</script>

<style scoped>

</style>
